import {React, useEffect, useState} from 'react'
import Tabber from '../copmonets/Tabber'
import {Button, CenterPopup, Dialog, Form, Picker, TextArea, Toast} from 'antd-mobile'
import {RightOutline} from 'antd-mobile-icons'
import './user.css'
import {bindBank, getInfo} from '../request/api'
import {useNavigate} from "react-router-dom";
import {useTranslation} from "react-i18next";
import {langData} from "@/utils/utils";

export default function User() {
    const { t, i18n } = useTranslation();
    const navigate = useNavigate();
    const [visible, setVisible] = useState(false)//选择器显示
    const [defaultHead, setDefaultHead] = useState('./assets/index/headDefault1.svg')
    const [userInfo, setUserInfo] = useState({})
    const [orderMoney, setOrderMoney] = useState()
    const [show, setShow] = useState(false)
    const [list1, setlist1] = useState(langData)
    const [visible2, setVisible2] = useState(false)

    const getData = async () => {
        const res = await getInfo({})
        if (res.code == 0) {
            switch (res.data.headimg) {
                case '1':
                    setDefaultHead('./assets/index/headDefault1.svg')
                    break;
                case '2':
                    setDefaultHead('./assets/index/headDefault2.svg')
                    break;
                case '3':
                    setDefaultHead('./assets/index/headDefault3.svg')
                    break;
                case '4':
                    setDefaultHead('./assets/index/headDefault4.svg')
                    break;
                case '5':
                    setDefaultHead('./assets/index/headDefault5.svg')
                    break;
                default:
                    setDefaultHead('./assets/index/headDefault1.svg')
                    break;
            }
            setUserInfo(res.data)
            // 判断是否有未完成订单，有的话当前余额减去冻结金额，没有的话正常显示余额
            if (res.data.freeze_balance !== '0.00') {
                //有未完成订单，余额减去订冻结的金额
                setOrderMoney((Number(res.data.balance) - Number(res.data.freeze_balance)).toFixed(2))
            } else {
                //正常余额
                setOrderMoney(Number(res.data.balance));
            }
        }
    }
    const pasteTextFunction = async () => {
        document.querySelector('.pasteItem textarea').value = await navigator.clipboard.readText();
    }
    const handleWithdraws = async () => {

        if (userInfo.bank_bind == 0) {
            const res1 = await Dialog.confirm({
                content: t('pcs15'),
                cancelText: t('ty2'),
                confirmText: t('ty1'),
            })
            if(res1) {
                await Dialog.confirm({
                    content: (
                        <>
                            <TextArea className="pasteItem" placeholder={t('pcs15')}
                                      rows={2}/>
                            <div onClick={pasteTextFunction} style={{
                                width: '100%',
                                border: '1px dashed #ed7239',
                                fontSize: '14px',
                                color: '#ed7239',
                                padding: '5px 0',
                                textAlign: 'center',
                                borderRadius: '3px',
                                marginTop: '5px'
                            }}>{t('cz13')}</div>
                            {/*<Button onClick={pasteTextFunction} color='primary' fill={"outline"}></Button>*/}
                        </>
                    ),
                    cancelText: t('ty2'),
                    confirmText: t('yh3'),
                    onConfirm: async () => {
                        const textDom = document.querySelector('.pasteItem textarea')
                         if (!textDom.value) {
                             Toast.show({
                                 icon: 'success',
                                 content: t('pcs3'),
                                 duration: 1100
                             })
                             throw new Error()
                         }
                         const bankRes = await bindBank({
                             banktype: 2,
                             bankname: 'usdt_trc',
                             cardnum: textDom.value
                         });
                         if (bankRes.code == 1) {
                             Toast.show({
                                 icon: 'fail',
                                 content: res.info,
                                 duration: 2200
                             })
                             return false
                         }
                         Toast.show({
                             icon: 'success',
                             content: t('t7'),
                             duration: 1100
                         })
                         navigate('/Withdraw')
                    }
                })
            }

        }else {
            navigate('/Withdraw')
        }
    }
    const jump = (val) => {
        navigate(val)
    }
    const outLogin = () => {
        localStorage.removeItem('userInfo');
        localStorage.removeItem('token');
        localStorage.removeItem('warning');
        localStorage.removeItem('tan');
        localStorage.removeItem('tabber');
        Toast.show({
            icon: 'loading',
            content: t('t4'),
            duration: 800
        })
        setTimeout(() => {
            navigate('/Login')
        }, 1000);
    }
    useEffect(() => {
        getData()
    }, [])
    return (
        <div className='user'>
            <div className='user_top'>
                <div className='user_info'>
                    <img src={defaultHead} alt="" />
                    <div className='info_text'>
                        <p>{userInfo.username}</p>
                        <div className='user_id'>
                            <p>{t('l12')}:{userInfo.invite_code}</p>
                            <img src="./assets/index/copy.svg" alt="" onClick={() => {
                                navigator.clipboard.writeText(userInfo.invite_code).then(() => {
                                    Toast.show({
                                        icon: 'success',
                                        content: t('yq2'),
                                    })
                                });
                            }} />
                        </div>
                        <div className='user_id'>
                            <p>{t('l8')}:{userInfo.tel}</p>
                            <img src="./assets/index/copy.svg" alt="" onClick={() => {
                                navigator.clipboard.writeText(userInfo.tel).then(() => {
                                    Toast.show({
                                        icon: 'success',
                                        content: t('yq2'),
                                    })
                                });
                            }} />
                        </div>
                    </div>
                </div>
            </div>
            <div className='user_box'>
                <div className='user_fun'>
                    <div className='money_num'>
                        <div className='user_usdts'>
                            <img src="./assets/index/smalllogo.svg" alt="" />
                            <p>{orderMoney}</p>
                            <p>USDT</p>
                        </div>
                        <img src="./assets/index/frash1.svg" alt="" onClick={() => {
                            Toast.show({
                                icon: 'loading',
                                content: t('t4'),
                                duration: 1000,
                            })
                            getData()
                        }} />
                    </div>
                    <div className='user_but'>
                        <p className='but_click but1' onClick={handleWithdraws}>{t('g1')}</p>
                        <p className='but_click but2' onClick={() => {
                            navigate('/UserPay', {state: 2})
                            // setVisible2(true)
                        }}>{t('g2')}</p>


                        <CenterPopup
                            visible={visible2}
                            onMaskClick={() => {
                                setVisible2(false)
                            }}
                        >
                            <div className="" style={{padding: 12}}>
                                <Button block style={{marginBottom: 10}} onClick={()=>{
                                    navigate('/UserPay', {state: 1})
                                }}>{t('pcs12')}</Button>
                                <Button block onClick={() =>{
                                    navigate('/UserPay', {state: 2})
                                }}>TRX20-USDT</Button>
                            </div>
                        </CenterPopup>
                    </div>
                </div>
                <div className='user_invite'>
                    <div className='invite_text'>
                        <p style={{ fontSize: '16px', margin: '0 0 5px', color: '#fff' }}>{t('g3')}</p>
                        <p style={{color: '#fff'}}>{t('g5')}</p>
                    </div>
                    <p onClick={() => { navigate(`/Invite`, { state: { invite: userInfo.invite_code } }) }}>{t('g4')}</p>
                </div>
                <div className='user_list'>
                    <div className='user_list_item' onClick={() => {
                        jump('/UserInfo')
                    }}>
                        <div className='list_item_name'>
                            <img src="./assets/index/edit.svg" alt=""/>
                            <p>{t('g6')}</p>
                        </div>
                        <RightOutline/>
                    </div>
                    <div className='user_list_item' onClick={() => {
                        window.open(userInfo.miitbeian)
                    }}>
                        <div className='list_item_name'>
                            <img src="./assets/index/kefu.png" alt=""/>
                            <p>{t('t26')}</p>
                        </div>
                        <RightOutline/>
                    </div>
                    {/*<div className='user_list_item' onClick={() => { navigate('/Recharge') }}>
                        <div className='list_item_name'>
                            <img src="./assets/index/jifenmingxi.svg" alt="" />
                            <p>{t('g7')}</p>
                        </div>
                        <RightOutline />
                    </div>*/}
                    <div className='user_list_item' onClick={() => {
                        navigate('/Recharge')
                    }}>
                        <div className='list_item_name'>
                            <img src="./assets/index/jifenmingxi.svg" alt=""/>
                            <p>{t('g8')}</p>
                        </div>
                        <RightOutline/>
                    </div>
                    <div className='user_list_item' onClick={() => {
                        navigate('/Withdraws')
                    }}>
                        <div className='list_item_name'>
                            <img src="./assets/index/tixian.svg" alt=""/>
                            <p>{t('g9')}</p>
                        </div>
                        <RightOutline/>
                    </div>

                    <div className='user_list_item' onClick={() => {
                        navigate('/FlowRecord')
                    }}>
                        <div className='list_item_name'>
                            <img src="./assets/index/tixian.svg" alt=""/>
                            <p>{t('g13')}</p>
                        </div>
                        <RightOutline/>
                    </div>

                    {/*<div className='user_list_item' onClick={() => { navigate('/cardList') }}>
                        <div className='list_item_name'>
                            <img src="./assets/index/huiyuanchongzhi.svg" alt="" />
                            <p>{t('pcs2')}</p>
                        </div>
                        <RightOutline />
                    </div>*/}
                    <div className='user_list_item' onClick={() => {
                        setVisible(true)
                    }}>
                        <div className='list_item_name'>
                            <img src="./assets/index/ziranyuyanchuli.svg" alt=""/>
                            <p>{t('g10')}</p>
                        </div>
                        <RightOutline/>
                    </div>
                </div>
                <div className='Logout' onClick={() => {
                    setShow(true)
                }}>
                    <p>{t('g11')}</p>
                </div>
                <div style={{height: "60px"}}></div>
            </div>
            {
                show && <div className='modelWindow'>
                    <div className='window_center'>
                    <div className='outLogin'>
                            <p>{t('g12')}?</p>
                            <div className='outLogin_fun'>
                                <p onClick={() => { setShow(false) }}>{t('ty2')}</p>
                                <p onClick={outLogin}>{t('ty1')}</p>
                            </div>
                        </div>
                    </div>
                </div>
            }
            <Picker
                columns={list1}
                defaultValue={[localStorage.getItem('lang') || 'en']}
                cancelText={t('ty2')}
                confirmText={t('ty1')}
                visible={visible}
                onClose={() => {
                    setVisible(false)
                }}
                onConfirm={v => {
                    i18n.changeLanguage(v[0])
                    localStorage.setItem('lang', v[0])
                }}
            />
            <Tabber></Tabber>
        </div>
    )
}
